I am trying to add fontawesome icon on my react js project but getting an error.

npm version: 8.1.4
node version: 17.2.0

├─┬ @fortawesome/react-fontawesome@0.1.16
│ └── react@17.0.2 deduped
├─┬ @testing-library/react@11.2.7
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-icons@4.3.1
│ └── react@17.0.2 deduped
├─┬ react-scripts@4.0.3
│ └── react@17.0.2 deduped
└── react@17.0.2

I want to add two heart icons on my project. One is solid and one is regular. The code is for the heart icons are:

<i class="far fa-heart"></i>
<i class="fas fa-heart"></i>

On my react.js project, a class component I have declared named Like, and the code is shown below:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHeart } from '@fortawesome/free-regular-svg-icons';

class Like extends React.Component {
  render() {
    return <FontAwesomeIcon icon={['fas', 'faHeart']}></FontAwesomeIcon>;
  }
}

export default Like;

I get this error: Could not find icon {prefix: 'fas', iconName: 'faHeart'}

If I use return <FontAwesomeIcon icon={faHeart}></FontAwesomeIcon>; then it solved but I need to add the two icon ones prefix is fas and ones is fas.

How can I do that? Please help me. I am new to React.js.